<template>
  <div>
    <el-form ref="formRef" :inline="true" :model="menuRef.menuSData" class="demo-dynamic">
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model.string="menuRef.menuSData.name" autocomplete="off" placeholder="用户名" type="text" />
      </el-form-item>
      <el-form-item label="菜单类型" prop="type">
        <el-select v-model="menuRef.menuSData.type" placeholder="菜单类型">
          <el-option v-for="item in menuRef.menuTypes" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchMenuSubmit()">搜索</el-button>
        <el-button type="primary" @click="resetForm(formRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-button type="primary" @click="opendialog">
          <el-icon>
            <Plus />
          </el-icon>
          添加菜单
        </el-button>
      </el-col>
    </el-row>
  </div>
  <div>
    <el-table :data="menuRef.menuTable" :default-expand-all="false" row-key="id" stripe style="width: 100%">
      <el-table-column label="菜单名称" prop="name" width="180" />
      <el-table-column align="center" header-align="center" label="图标" prop="icon" width="180" />
      <el-table-column align="center" header-align="center" label="前端路由" prop="multiUrl" />
      <el-table-column align="center" header-align="center" label="后台路由" prop="backUrl" />
      <el-table-column align="center" header-align="center" label="排序" prop="orderNum" />
      <el-table-column align="center" header-align="center" label="菜单类型" prop="menuType">
        <template #default="scope">
          <div>
            {{ scope.row.menuType.name === 'M' ? '目录' : scope.row.menuType.name === 'C' ? '菜单' : scope.row.menuType.name === 'H' ? '首页' : '按钮' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="权限标识" prop="permission" />
      <el-table-column align="center" header-align="center" label="创建时间" prop="createTime" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button :disabled="scope.row.menuType.value === 'H'" link size="small" type="primary" @click="edit(scope.row)">编辑 </el-button>
          <el-popconfirm title="确定要删除吗?" @confirm="deleted(scope.row)">
            <template #reference>
              <el-button :disabled="scope.row.menuType.value === 'H'" link type="primary">删除 </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="menuRef.dialogFormVisible" title="添加菜单" destroy-on-close @close="restDialog(refM, refF, refC, refW, true)">
    <el-tabs v-model="menuRef.addMenuTab" class="demo-tabs" type="border-card" @tab-click="restDialog(refM, refF, refC, refW, false)" @tab-change="getselect" :before-leave="beforeLeave">
      <el-tab-pane label="目录" name="M">
        <el-form ref="refM" :model="menuRef.addMenuData" :rules="menuRef.rulesM" class="demo-ruleForm" label-width="120px" status-icon>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="目录名称" prop="name">
                <el-input v-model="menuRef.addMenuData.name" autocomplete="off" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="图标" prop="icon">
                <el-select v-model="menuRef.addMenuData.icon" placeholder="Select">
                  <el-option v-for="item in menuRef.icons" :key="item" :label="item" :value="item">
                    <span style="float: left">{{ item }}</span>
                    <span style="float: right; color: var(--el-text-color-secondary); font-size: 16px">
                      <el-icon>
                        <component :is="item"></component>
                      </el-icon>
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="路由标识" prop="multiUrl">
                <el-input v-model="menuRef.addMenuData.multiUrl" autocomplete="off" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="权限标识" prop="permission">
                <el-input v-model="menuRef.addMenuData.permission" autocomplete="off" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="排序" prop="orderNum">
                <el-input-number v-model="menuRef.addMenuData.orderNum" :step="1" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="saveUserSub(refM, 'M')">保存 </el-button>
                <el-button @click="menuRef.dialogFormVisible = false">取消 </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="菜单" name="C">
        <el-form ref="refC" :model="menuRef.addMenuData" :rules="menuRef.rulesC" class="demo-ruleForm" label-width="120px" status-icon>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="目录" prop="pid">
                <el-select v-model="menuRef.addMenuData.pid" class="m-2" placeholder="选择目录" size="large">
                  <el-option v-for="item in menuRef.selectMenuM" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="目录名称" prop="name">
                <el-input v-model="menuRef.addMenuData.name" autocomplete="off" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="图标" prop="icon">
                <el-select v-model="menuRef.addMenuData.icon" placeholder="Select">
                  <el-option v-for="item in menuRef.icons" :key="item" :label="item" :value="item">
                    <span style="float: left">{{ item }}</span>
                    <span style="float: right; color: var(--el-text-color-secondary); font-size: 16px">
                      <el-icon>
                        <component :is="item"></component>
                      </el-icon>
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="路由标识" prop="multiUrl">
                <el-input v-model="menuRef.addMenuData.multiUrl" autocomplete="off" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="权限标识" prop="permission">
                <el-input v-model="menuRef.addMenuData.permission" autocomplete="off" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="排序" prop="orderNum">
                <el-input-number v-model="menuRef.addMenuData.orderNum" :step="1" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="saveUserSub(refC, 'C')">保存 </el-button>
                <el-button @click="menuRef.dialogFormVisible = false">取消 </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="按钮" name="F">
        <el-form ref="refF" :model="menuRef.addMenuData" :rules="menuRef.rulesF" class="demo-ruleForm" label-width="120px" status-icon>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="菜单" prop="pid">
                <el-select v-model="menuRef.addMenuData.pid" class="m-2" placeholder="选择菜单" size="large">
                  <el-option v-for="item in menuRef.selectMenuC" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="按钮名称" prop="name">
                <el-input v-model="menuRef.addMenuData.name" autocomplete="off" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="图标" prop="icon">
                <el-select v-model="menuRef.addMenuData.icon" placeholder="Select">
                  <el-option v-for="item in menuRef.icons" :key="item" :label="item" :value="item">
                    <span style="float: left">{{ item }}</span>
                    <span style="float: right; color: var(--el-text-color-secondary); font-size: 16px">
                      <el-icon>
                        <component :is="item"></component>
                      </el-icon>
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="后端路径" prop="backUrl">
                <el-input v-model="menuRef.addMenuData.backUrl" autocomplete="off" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="权限标识" prop="permission">
                <el-input v-model="menuRef.addMenuData.permission" autocomplete="off" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="排序" prop="orderNum">
                <el-input-number v-model="menuRef.addMenuData.orderNum" :step="1" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="saveUserSub(refF, 'F')">保存 </el-button>
                <el-button @click="menuRef.dialogFormVisible = false">取消 </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="外链" name="W">
        <el-form ref="refW" :model="menuRef.addMenuData" :rules="menuRef.rulesW" class="demo-ruleForm" label-width="120px" status-icon>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="外链名称" prop="name">
                <el-input v-model="menuRef.addMenuData.name" autocomplete="off" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="图标" prop="icon">
                <el-select v-model="menuRef.addMenuData.icon" placeholder="Select">
                  <el-option v-for="item in menuRef.icons" :key="item" :label="item" :value="item">
                    <span style="float: left">{{ item }}</span>
                    <span style="float: right; color: var(--el-text-color-secondary); font-size: 16px">
                      <el-icon>
                        <component :is="item"></component>
                      </el-icon>
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="路径" prop="multiUrl">
                <el-input v-model="menuRef.addMenuData.multiUrl" autocomplete="off" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="权限标识" prop="permission">
                <el-input v-model="menuRef.addMenuData.permission" autocomplete="off" type="text" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="排序" prop="orderNum">
                <el-input-number v-model="menuRef.addMenuData.orderNum" :step="1" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="saveUserSub(refW, 'W')">保存 </el-button>
                <el-button @click="menuRef.dialogFormVisible = false">取消 </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script lang="ts" setup>
import { menuClass, menuDataInfo, menuEditInfo } from '@/page/types/admin/menu'
import { addMenu, deleteMenu, detailMenu, menuList, selectMenu, updateMenu } from '@/api/admin'
import { ElMessage, FormInstance } from 'element-plus/es'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const menuRef = reactive(new menuClass())
const formRef = ref<FormInstance>()
const refF = ref<FormInstance>()
const refM = ref<FormInstance>()
const refC = ref<FormInstance>()
const refW = ref<FormInstance>()
const searchMenuSubmit = () => {
  menuList(menuRef.menuSData).then(res => {
    const data = res.data as menuDataInfo[]
    menuRef.menuTable = data
  })
}
const beforeLeave = (activeName: any, oldActiveName: any) => {
  return menuRef.isTags
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const restDialog = (refM: FormInstance | undefined, refF: FormInstance | undefined, refC: FormInstance | undefined, refW: FormInstance | undefined, isClose: boolean) => {
  if ((!refM && !refF && !refC && !refW) || !isClose) return
  if (refM) refM.resetFields()
  if (refF) refF.resetFields()
  if (refC) refC.resetFields()
  if (refW) refW.resetFields()
  menuRef.addMenuData = {}
}
const getselect = (name: any) => {
  if (name == 'C') {
    selectMenu('', 'M').then(res => {
      menuRef.selectMenuM = res.data
    })
  }
  if (name == 'F') {
    selectMenu('', 'C').then(res => {
      menuRef.selectMenuC = res.data
    })
  }
}
const opendialog = () => {
  menuRef.addMenuTab = 'M'
  menuRef.dialogFormVisible = true
  menuRef.isTags = true
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    menuRef.icons.push(key)
  }
}
const saveUserSub = (reset: FormInstance | undefined, type: string) => {
  if (!reset) return
  menuRef.addMenuData.menuType = type
  if (menuRef.addMenuData.id) {
    updateMenu(menuRef.addMenuData).then(res => {
      searchMenuSubmit()
      ElMessage({
        message: '更新菜单成功',
        type: 'success'
      })
    })
  } else {
    addMenu(menuRef.addMenuData).then(res => {
      searchMenuSubmit()
      ElMessage({
        message: '添加菜单成功',
        type: 'success'
      })
    })
  }

  menuRef.dialogFormVisible = false
}
const deleted = (row: menuDataInfo) => {
  deleteMenu(row.id).then(() => {
    searchMenuSubmit()
    ElMessage({
      message: '删除菜单成功',
      type: 'success'
    })
  })
}
const edit = async (row: menuDataInfo) => {
  menuRef.addMenuData = {}
  menuRef.addMenuTab = ''
  menuRef.dialogFormVisible = true
  await detailMenu(row.id).then(res => {
    menuRef.addMenuData = res.data
    menuRef.addMenuTab = res.data.menuType.name
    menuRef.isTags = true
  })
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    menuRef.icons.push(key)
  }
  menuRef.isTags = false
}
onMounted(() => {
  searchMenuSubmit()
})
</script>

<style lang="scss" scoped>
.el-select {
  width: 200px;
}
</style>
